<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>刮刮卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            text-align: center;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
            border: 1px solid rgba(255, 255, 255, 0.2);
            max-width: 500px;
            width: 100%;
        }

        h1 {
            color: white;
            margin-bottom: 25px;
            font-size: 2.2em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .scratch-card {
            position: relative;
            width: 300px;
            height: 150px;
            margin: 0 auto 25px;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .prize-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            font-weight: bold;
            color: white;
            background: linear-gradient(135deg, #00c9ff 0%, #92fe9d 100%);
            z-index: 1;
        }

        #scratchCanvas {
            position: absolute;
            top: 0;
            left: 0;
            cursor: crosshair;
            z-index: 2;
        }

        .controls {
            margin-top: 25px;
            display: flex;
            justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
        }

        button {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.3);
            padding: 12px 25px;
            font-size: 16px;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
        }

        .result {
            margin-top: 25px;
            font-size: 18px;
            color: white;
            min-height: 30px;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0,0,0,0.2);
        }

        .reset-btn {
            background: rgba(255, 107, 107, 0.7);
        }

        .reset-btn:hover {
            background: rgba(255, 107, 107, 0.9);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🎉 刮刮卡游戏</h1>
        <div class="scratch-card">
            <div class="prize-layer" id="prizeLayer">
                <span id="prizeText">恭喜中奖！100元</span>
            </div>
            <canvas id="scratchCanvas" width="300" height="150"></canvas>
        </div>
        <div class="controls">
            <button onclick="resetCard()">重新开始</button>
            <button onclick="changePrize()">换奖品</button>
        </div>
        <div class="result" id="result"></div>
    </div>

    <script>
        const canvas = document.getElementById('scratchCanvas');
        const ctx = canvas.getContext('2d');
        const prizeText = document.getElementById('prizeText');
        const result = document.getElementById('result');
        
        // 奖品列表
        const prizes = [
            '恭喜中奖！100元',
            '恭喜中奖！50元',
            '恭喜中奖！20元',
            '恭喜中奖！10元',
            '谢谢参与',
            '恭喜中奖！5元',
            '恭喜中奖！200元',
            '恭喜中奖！500元'
        ];

        let isDrawing = false;
        let hasWon = false;

        // 初始化刮刮卡
        function initScratchCard() {
            // 设置刮刮层为银色
            ctx.fillStyle = '#c0c0c0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 添加刮刮卡文字
            ctx.font = 'bold 24px Arial';
            ctx.fillStyle = '#333';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText('刮开有惊喜', canvas.width / 2, canvas.height / 2);
            
            hasWon = false;
            result.textContent = '';
        }

        // 刮开效果
        function scratch(x, y) {
            ctx.globalCompositeOperation = 'destination-out';
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, 2 * Math.PI);
            ctx.fill();
            
            // 检查刮开的面积
            checkScratchArea();
        }

        // 检查刮开的面积
        function checkScratchArea() {
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const pixels = imageData.data;
            let transparentPixels = 0;
            
            for (let i = 3; i < pixels.length; i += 4) {
                if (pixels[i] < 128) {
                    transparentPixels++;
                }
            }
            
            const scratchPercentage = (transparentPixels / (canvas.width * canvas.height)) * 100;
            
            if (scratchPercentage > 50 && !hasWon) {
                hasWon = true;
                revealPrize();
            }
        }

        // 显示奖品
        function revealPrize() {
            // 完全清除刮刮层
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 显示结果
            if (prizeText.textContent.includes('谢谢参与')) {
                result.textContent = '很遗憾，再接再厉！';
                result.style.color = '#ff6b6b';
            } else {
                result.textContent = '太棒了！您获得了：' + prizeText.textContent;
                result.style.color = '#00c9ff';
            }
        }

        // 鼠标事件
        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            scratch(x, y);
        });

        canvas.addEventListener('mousemove', (e) => {
            if (!isDrawing) return;
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            scratch(x, y);
        });

        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
        });

        // 触摸事件（移动设备）
        canvas.addEventListener('touchstart', (e) => {
            e.preventDefault();
            isDrawing = true;
            const rect = canvas.getBoundingClientRect();
            const touch = e.touches[0];
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            scratch(x, y);
        });

        canvas.addEventListener('touchmove', (e) => {
            e.preventDefault();
            if (!isDrawing) return;
            const rect = canvas.getBoundingClientRect();
            const touch = e.touches[0];
            const x = touch.clientX - rect.left;
            const y = touch.clientY - rect.top;
            scratch(x, y);
        });

        canvas.addEventListener('touchend', () => {
            isDrawing = false;
        });

        // 重置刮刮卡
        function resetCard() {
            initScratchCard();
        }

        // 更换奖品
        function changePrize() {
            const randomIndex = Math.floor(Math.random() * prizes.length);
            prizeText.textContent = prizes[randomIndex];
            resetCard();
        }

        // 初始化
        initScratchCard();
    </script>
</body>
</html>